<template>
  <div class="task">
    <van-nav-bar left-text left-arrow fixed placeholder safe-area-inset-top>
      <template #title>
        <div class="tabs">
          <div
            v-for="(tab, index) in tabs"
            :key="tab.code"
            class="tab"
            @click="setActiveTab(index, tab.code)"
            :style="{
              fontSize: index === activeIndex ? '20px' : '16px',
              color: index === activeIndex ? '#1D2129' : '#86909C',
            }"
          >
            <div>{{ tab.title }}</div>
            <!-- 滑块 -->
            <div :class="{ active: index === activeIndex }"></div>
          </div>
        </div>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="task-content">
      <!-- tab选项 -->
      <div class="tab-content" v-if="tabs[activeIndex].content">
        <div
          class="tab-content-button"
          v-for="(item, index) in tabs[activeIndex].content"
          :key="item.code"
          :class="{ activeButton: index === activeButton }"
        >
          <div v-if="tabs[activeIndex]" @click="tabButton(index, item.code)">
            {{ item.action }}
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="task-content-card">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="item in list" :key="item" :title="item">
              <task-card></task-card>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import taskCard from "./components/taskCard.vue";
const tabs = ref([
  {
    title: "已办",
    content: [
      { code: 31, action: "服务" },
      { code: 311, action: "服务1" },
    ],
    code: 112,
  },
  {
    title: "代办",
    content: [
      { code: 32, action: "服务1" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务w服务服务服务" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务w" },
      { code: 322, action: "服务last" },
    ],
    code: 322,
  },
]);

interface Tab {
  title: string;
  content?: Content[];
  code: number;
}
interface Content {
  action: string;
  code: number;
}

const activeTab = ref(0); // 默认激活的选项卡索引
const activeIndex = ref(0);

const setActiveTab = (index: number, code: number) => {
  activeTab.value = code; // 切换选项卡
  activeIndex.value = index;
};

const activeButton = ref(0); //默认激活按钮
const buttonCode = ref(0);
const tabButton = (index: number, code: number) => {
  activeButton.value = index;
  buttonCode.value = code;
};

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 20) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>

<style lang="scss" scoped>
.task {
  height: calc(100vh - 50px);
  .tabs {
    display: flex;
    font-size: 16px;
    align-items: baseline;
    .tab {
      margin: 0 15px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .active {
    margin: 5px auto 0;
    width: 25px;
    border-bottom: 3px solid var(--van-primary-color);
    border-radius: 25px;
  }
  .task-content {
    background-color: #f7f8fa;
    height: 100%;
    overflow-y: auto;
    .tab-content {
      position: fixed;
      top: 44px;
      left: 0;
      z-index: 10;
      width: 100%;
      overflow-x: auto; /* 允许横向滚动 */
      white-space: nowrap; /* 不允许换行 */
      -ms-overflow-style: none; /* IE 10+ */
      scrollbar-width: none; /* Firefox */
      display: flex;
      padding: 12px 0 12px 17px;
      background-color: white;
      &-button {
        min-width: none;
        height: 30px;
        font-size: 12px;
        background-color: #f2f3f5;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
        padding: 0 12px 0 12px;
      }
      &-button:last-child {
        margin-right: 30px;
      }

      .activeButton {
        background-color: #ffeeee;
        color: #f4423e;
      }
    }
    .tab-content::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }
    &-card {
      margin-top: 50px;
      padding: 17px;
      .card {
        margin-bottom: 15px;
      }
      margin-bottom: 40px;
    }
  }
}
</style>

